import IconHotRankNo1 from '@/components/icon/IconHotRankNo1';
import IconHotRankNo2 from '@/components/icon/IconHotRankNo2';
import IconHotRankNo3 from '@/components/icon/IconHotRankNo3';
import { rankArea } from '@/services/api/api-assess-week-emphasize-rank';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Alert, DatePicker, Select, Space } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useRef } from 'react';
import { useAccess } from 'umi';
dayjs.extend(customParseFormat);
const dateFormat = 'YYYY-MM-DD';

interface RankAreaProps {}

const RankArea: React.FC<RankAreaProps> = ({}) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<AssessWeekEmphasizeRankData.AreaRank>[] = [
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          排序
        </span>
      ),
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
      align: 'center',
      render: (dom, entity, index, action) => {
        if (index == 0) {
          return <IconHotRankNo1 width={18} height={18} />;
        } else if (index == 1) {
          return <IconHotRankNo2 width={18} height={18} />;
        } else if (index == 2) {
          return <IconHotRankNo3 width={18} height={18} />;
        } else {
          return dom;
        }
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          区域
        </span>
      ),
      dataIndex: 'areaName',
      align: 'center',
      ellipsis: true,
      width: '23%',
      render: (dom, entity, index, action) => dom,
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          总分
        </span>
      ),
      dataIndex: 'totalScore',
      align: 'center',
      sorter: true,
      width: '85px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          总篇量
        </span>
      ),
      dataIndex: 'totalCount',
      align: 'center',
      sorter: true,
      width: '85px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          好报道-得分
        </span>
      ),
      dataIndex: 'reportType1Score',
      align: 'center',
      sorter: true,
      width: '85px',
    },

    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          好评论 得分
        </span>
      ),
      dataIndex: 'reportType2Score',
      align: 'center',
      sorter: true,
      width: '85px',
    },

    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          好创意报道 得分
        </span>
      ),
      dataIndex: 'reportType3Score',
      align: 'center',
      sorter: true,
      width: '85px',
    },
  ];

  function setCreatedTimesState(arg0: string[]) {
    throw new Error('Function not implemented.');
  }

  return (
    <>
      <PageContainer
        header={{
          title: '传播质效-重要稿件',
          breadcrumb: {
            items: [],
          },
        }}
      >
        {/* <Card>
          <Descriptions size="small" column={3}>
            <Descriptions.Item label="总量">{100}</Descriptions.Item>
            <Descriptions.Item label="本周">Lili Qu</Descriptions.Item>
            <Descriptions.Item label="三周内">
              <a>421421</a>
            </Descriptions.Item>
            <Descriptions.Item label="统计数据">2017-01-10</Descriptions.Item>
            <Descriptions.Item label="汇总数据">2017-10-10</Descriptions.Item>
          </Descriptions>
        </Card> */}
        <ProTable<AssessWeekEmphasizeRankData.AreaRank>
          columns={columns}
          actionRef={actionRef}
          rowKey="id"
          request={async (params = {}, sorter) => {
            const response = await rankArea({
              ...params,
            });
            return {
              data: response.data,
              success: true,
              total: response.data?.length,
            };
          }}
          dateFormatter="id"
          defaultSize={'small'}
          pagination={false}
          search={false}
          options={{
            density: false,
            setting: false,
          }}
          ghost
          scroll={{
            x: '1100px',
          }}
          headerTitle={
            <Alert
              message="计算公式：阅读（40%）+ 点赞（30%）+ 转发（30%）"
              type="info"
              showIcon
              style={{
                fontSize: 12,
              }}
            />
          }
          toolbar={{
            // search: {
            //   allowClear: true,
            //   onSearch: (value: string) => {
            //     actionRef.current?.reloadAndRest();
            //   },
            // },
            filter: (
              <Space>
                <Select
                  placeholder="全部"
                  variant="filled"
                  defaultValue={'0'}
                  style={{ width: '110px' }}
                  options={[
                    { value: '0', label: '全部' },
                    { value: '1', label: '好报道' },
                    { value: '2', label: '好评论' },
                    { value: '3', label: '好创意报道' },
                  ]}
                />
                <DatePicker.RangePicker
                  defaultValue={[dayjs().add(-7, 'd').startOf('day'), dayjs()]}
                  maxDate={dayjs()}
                  format={dateFormat}
                  variant="filled"
                  allowClear={false}
                  style={{ width: '230px' }}
                  onChange={(dates, dateStrings) => {
                    setCreatedTimesState(dateStrings.map((item) => item + ' 00:00:00'));
                  }}
                />
              </Space>
            ),
          }}
        />
      </PageContainer>
    </>
  );
};
export default RankArea;
